﻿<!doctype html>
<html>

<head>
    {% load static %}
    <meta charset="utf-8">
    <title>共享单车数据可视化界面</title>
    <script type="text/javascript" src="{% static 'web/visualize_static/js/jquery.js' %}"></script>
    <link rel="stylesheet" href="{% static 'web/visualize_static/css/comon0.css' %}">
</head>

<body>
<div class="loading">
    <div class="loadbox"><img src="{% static 'web/visualize_static/images/loading.gif' %}"> 页面加载中...</div>
</div>
<div class="head">
    <h1><a href="{% url 'user_backend' %}" style="color: white">共享单车可视化数据大屏</a></h1>
    <div class="time" id="showTime"><a href="#">2021年12月05日16时16分54秒</a>
    </div>
    <script>
        var t = null;
        t = setTimeout(time, 1000);//開始运行
        function time() {
            clearTimeout(t);//清除定时器
            dt = new Date();
            var y = dt.getFullYear();
            var mt = dt.getMonth() + 1;
            var day = dt.getDate();
            var h = dt.getHours();//获取时
            var m = dt.getMinutes();//获取分
            var s = dt.getSeconds();//获取秒
            var t = null;
            document.getElementById("showTime").innerHTML = y + "年" + Appendzero(mt) + "月" + Appendzero(day) + "日" + Appendzero(h) + "时" + Appendzero(m) + "分" + Appendzero(s) + "秒";

            function Appendzero(obj) {
                if (obj < 10) return "0" + "" + obj;
                else return obj;
            }

            t = setTimeout(time, 1000); //设定定时器，循环运行
        }
    </script>
</div>
<div class="mainbox">
    <ul class="clearfix">
        <li>
            <div class="boxall" style="height: calc(15% - .15rem)">
                <ul class="row h100 row1">
                    <li class="col-4">
                        <div class="bar1"><img src="{% static 'web/visualize_static/images/icon1.png' %}">
                            <h3><span>时间跨度</span>{{ time_span_years }}年</h3>
                        </div>
                    </li>
                    <li class="col-4">
                        <div class="bar1"><img src="{% static 'web/visualize_static/images/icon4.png' %}">
                            <h3><span>冬天记录数</span>{{ winter_count }}条</h3>
                        </div>
                    </li>
                    <li class="col-4">
                        <div class="bar1"><img src="{% static 'web/visualize_static/images/icon5.png' %}">
                            <h3><span>夏天记录数
									</span>{{ summer_count }}条</h3>
                        </div>
                    </li>
                </ul>
            </div>
            <div class="boxall" style="height: calc(43% - .15rem)">

                <ul class="sec h100">
                    <li>
                        <div>
                            <p><img src="{% static 'web/visualize_static/images/icon4.png' %}">夏季骑行人数</p>
                            <div class="barnav">
                                <div class="bar2"><span style="width:50%;"></span></div>
                                <span>{{ summer_riders }}</span></div>


                        </div>

                        <div>
                            <div class="zaf">
                                </p>
                            </div>
                        </div>
                    </li>

                    <li>
                        <div>
                            <p><img src="{% static 'web/visualize_static/images/icon5.png' %}">春天骑行人数</p>

                            <div class="barnav">
                                <div class="bar2"><span style="width:50%;"></span></div>
                                <span>{{ spring_riders }}</span></div>
                        </div>

                        <div>
                            <div class="zaf">

                                </p>
                            </div>
                        </div>
                    </li>

                    <li>
                        <div>
                            <p><img src="{% static 'web/visualize_static/images/icon6.png' %}">秋天骑行人数</p>
                            <div class="barnav">
                                <div class="bar2"><span style="width:50%;"></span></div>
                                <span>{{ autumn_riders }}</span></div>
                        </div>

                        <div>
                            <div class="zaf">

                            </div>
                        </div>
                    </li>

                </ul>

            </div>
            <div class="boxall" style="height: calc(42% - .15rem)">
                <div class="alltitle">骑行人数变化趋势</div>
                <div class="boxnav" id="echarts3"></div>
            </div>
        </li>
        <li>
            <div class="boxall" style="height: calc(20% - .15rem)">
                <ul class="row h100 clearfix">
                    <li class="col-6">
                        <div class="sqzs h100">
                            <p>数据总览</p>
                            <h1>{{ total_num }}</h1>
                        </div>
                    </li>
                    <li class="col-6">
                        <ul class="row h100 clearfix">
                            <li class="col-4">
                                <div class="tit01">节假日占比</div>
                                <div class="piebox" id="pe01"></div>
                            </li>
                            <li class="col-4">
                                <div class="tit01">强降雨天数占比</div>
                                <div class="piebox" id="pe02"></div>
                            </li>
                            <li class="col-4">
                                <div class="tit01">强风天数占比</div>
                                <div class="piebox" id="pe03"></div>
                            </li>
                        </ul>

                    </li>
                </ul>
            </div>
            <div class="boxall" style="height: calc(38% - .15rem)">
                <div class="boxnav h100" id="echarts1"></div>
            </div>
            <div class="boxall" style="height: calc(42% - .15rem)">
                <div class="alltitle">指标变化趋势</div>
                <div class="boxnav" id="echarts2"></div>
            </div>

        </li>
        <li>
            {#预测模块#}
            <div class="boxall" style="height: calc(15% - .15rem)">

                <ul class="row h100 row1">
                    <li class="col-4">
                        <div class="bar1 bar2"><img src="{% static 'web/visualize_static/images/icon7.png' %}">
                            <h3><span>loss
									</span>0.0051</h3>
                        </div>
                    </li>
                    <li class="col-4">
                        <div class="bar1 bar2"><img src="{% static 'web/visualize_static/images/icon8.png' %}">
                            <h3><span>epoch
									</span>30</h3>
                        </div>
                    </li>
                    <li class="col-4">
                        <div class="bar1 bar2"><img src="{% static 'web/visualize_static/images/icon9.png' %}">
                            <h3><span>框架</span>tensor</h3>
                        </div>
                    </li>
                </ul>


            </div>
            <div class="boxall" style="height: calc(43% - .15rem)">
                <div class="alltitle">自行车租聘人数预测</div>
                <div class=" boxnav" id="lineChart">

                </div>

            </div>
            <div class="boxall" style="height: calc(42% - .15rem)">
                <div class="alltitle">租聘人数排行榜</div>
                <div class=" boxnav paim">
                    <ul class="h100">
                        <li>
                            <span>1</span>
                            <div class="pmnav">
                                <p>{{ month_list.0 }}月</p>
                                <div class="pmbar"><span style="width:100%"></span><i>{{ monthly_ridership.0 }}人次</i>
                                </div>
                            </div>
                        </li>
                        <li>
                            <span>2</span>
                            <div class="pmnav">
                                <p>{{ month_list.1 }}月</p>
                                <div class="pmbar"><span style="width:92%"></span><i>{{ monthly_ridership.1 }}人次</i>
                                </div>
                            </div>
                        </li>
                        <li>
                            <span>3</span>
                            <div class="pmnav">
                                <p>{{ month_list.2 }}月</p>
                                <div class="pmbar"><span style="width:90%"></span><i>{{ monthly_ridership.2 }}人次</i>
                                </div>
                            </div>
                        </li>
                        <li>
                            <span>4</span>
                            <div class="pmnav">
                                <p>{{ month_list.3 }}月</p>
                                <div class="pmbar"><span style="width:88%"></span><i>{{ monthly_ridership.3 }}人次</i>
                                </div>
                            </div>
                        </li>
                        <li>
                            <span>5</span>
                            <div class="pmnav">
                                <p>{{ month_list.4 }}月</p>
                                <div class="pmbar"><span style="width:86%"></span><i>{{ monthly_ridership.4 }}人次</i>
                                </div>
                            </div>
                        </li>
                    </ul>

                </div>

            </div>

        </li>
    </ul>
</div>

<script>
    $(document).ready(function () {
        var arr = [];
        var max;
        $(".paim li i").each(function () {
            arr.push($(this).text());
        })
        //alert(arr)
        max = Math.max.apply(null, arr);

        $(".paim .pmbar span").each(function () {
            var i = $(this).parents("li").index()
            w = arr[i] / max * 100;
            sw = w.toFixed(0) + '%'

            $(this).css({width: sw})
        })

    })
</script>


<script type="text/javascript" src="{% static 'web/visualize_static/js/echarts.min.js' %}"></script>
<script>
    /****/
    $(document).ready(function () {
        var whei = $(window).width()
        $("html").css({fontSize: whei / 20})
        $(window).resize(function () {
            var whei = $(window).width()
            $("html").css({fontSize: whei / 20})
        });
    });


    $(window).load(function () {
        $(".loading").fadeOut()
    })
    $(function () {
        echarts_1()
        echarts_2()
        echarts_3()

        pe01()
        pe02()
        pe03()

        function echarts_4() {
            var myChart = echarts.init(document.getElementById('echarts4'));
            var data = [{
                "name": "邮件总量",
                "value": 20000
            }, {
                "name": "公文交换",
                "value": 18170
            }, {
                "name": "内部流转",
                "value": 19870
            }]


            option = {

                color: ['#A0CE3A', '#31C5C0', '#1E9BD1', '#0F347B', '#585247', '#7F6AAD', '#009D85', "rgba(250,250,250,0.3)"],

                grid: {
                    bottom: 0,
                    left: 0,
                    right: '0'
                },
                series: [
                    // 主要展示层的
                    {
                        radius: ['30%', '50%'],
                        center: ['50%', '50%'],
                        type: 'pie',
                        label: {
                            normal: {
                                show: true,
                                formatter: ['{b|{b}}', '{c|{c}次}', '{d|同比：{d}%}'].join('\n'),
                                rich: {
                                    c: {
                                        color: 'rgb(241,246,104)',
                                        fontSize: 20,
                                        fontWeight: 'bold',
                                        lineHeight: 25
                                    },
                                    b: {
                                        color: 'rgb(98,137,169)',
                                        fontSize: 15,
                                        height: 40
                                    },
                                },

                                position: 'outside'
                            },
                            emphasis: {
                                show: true
                            }
                        },
                        labelLine: {
                            normal: {
                                show: true,
                                length: 15,
                                length2: 50
                            },
                            emphasis: {
                                show: true
                            }
                        },
                        name: "民警训练总量",
                        data: data,

                    },
                    // 边框的设置
                    {
                        radius: ['30%', '35%'],
                        center: ['50%', '50%'],
                        type: 'pie',
                        label: {
                            normal: {
                                show: false
                            },
                            emphasis: {
                                show: false
                            }
                        },
                        labelLine: {
                            normal: {
                                show: false
                            },
                            emphasis: {
                                show: false
                            }
                        },
                        animation: false,
                        tooltip: {
                            show: false
                        },
                        data: [{
                            value: 1,
                            itemStyle: {
                                color: "rgba(250,250,250,0.3)",
                            },
                        }],
                    }, {
                        name: '外边框',
                        type: 'pie',
                        clockWise: false, //顺时加载
                        hoverAnimation: false, //鼠标移入变大
                        center: ['50%', '50%'],
                        radius: ['60%', '61%'],
                        label: {
                            normal: {
                                show: false
                            }
                        },
                        data: [{
                            value: 9,
                            name: '',
                            itemStyle: {
                                normal: {
                                    borderWidth: 2,
                                    borderColor: '#0c2c69'
                                }
                            }
                        }]
                    },
                ]
            };

            myChart.setOption(option);
            window.addEventListener("resize", function () {
                myChart.resize();
            });


        }

        function echarts_1() {
            var myChart = echarts.init(document.getElementById('echarts1'));
            option = {
                tooltip: {
                    trigger: 'axis',
                    axisPointer: {type: 'shadow'},

                },
                legend: {
                    x: 'center',
                    y: '0',
                    icon: 'circle',
                    itemGap: 8,
                    textStyle: {color: 'rgba(255,255,255,.5)'},
                    itemWidth: 10,
                    itemHeight: 10,
                },
                grid: {
                    left: '0',
                    top: '30',
                    right: '15',
                    bottom: '0',
                    containLabel: true
                },
                xAxis: {
                    type: 'category',
                    data: ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月'],
                    axisLine: {show: false},

                    axisLabel: {
                        textStyle: {
                            color: 'rgba(255,255,255,.6)',
                            fontSize: 14
                        }
                    },
                },

                yAxis: {
                    type: 'value',
                    splitNumber: 4,
                    axisLine: {show: false},
                    axisTick: {show: false},
                    splitLine: {
                        show: true,
                        lineStyle: {
                            color: 'rgba(255,255,255,0.05)'
                        }
                    },
                    axisLabel: {
                        textStyle: {
                            color: 'rgba(255,255,255,.6)',
                            fontSize: 14
                        },
                    },
                },
                series: [{
                    name: '平均能见度',
                    type: 'bar',
                    barWidth: '15%',
                    itemStyle: {
                        normal: {
                            color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                                offset: 0,
                                color: '#8bd46e'
                            }, {
                                offset: 1,
                                color: '#03b48e'
                            }]),
                            barBorderRadius: 11,
                        }

                    },
                    data: {{ aver_vis_month }}

                },
                    {
                        name: '总降雨量',
                        type: 'bar',
                        barWidth: '15%',
                        itemStyle: {
                            normal: {
                                color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                                    offset: 0,
                                    color: '#3893e5'
                                }, {
                                    offset: 1,
                                    color: '#248ff7'
                                }]),
                                barBorderRadius: 11,
                            }
                        },
                        data: {{ aver_rain_month }}

                    },
                    {
                        name: '总辐射量',
                        type: 'bar',
                        barWidth: '15%',
                        itemStyle: {
                            normal: {
                                color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                                    offset: 0,
                                    color: '#43cadd'
                                }, {
                                    offset: 1,
                                    color: '#0097c9'
                                }]),
                                barBorderRadius: 11,
                            }
                        },
                        data: {{ aver_rad_month }}

                    }

                ]
            };

            myChart.setOption(option);
            window.addEventListener("resize", function () {
                myChart.resize();
            });


        }

        function echarts_2() {
            // 基于准备好的dom，初始化echarts实例
            var myChart = echarts.init(document.getElementById('echarts2'));

            let temperature_data = {{ temperature_list }};
            let RentedBikeCount = {{ RentedBikeCount }};
            let Rainfall = {{ Rainfall }};
            let Visibility = {{ Visibility }};

            let time = [
                {% for foo in time %}
                    '{{ foo }}',
                {% endfor %}
            ];

            // 设置颜色数组
            let colorArray = ['#FF0000', '#00FF00', '#0000FF', '#FF00FF'];

            option = {
                tooltip: {
                    trigger: 'axis',
                    axisPointer: {
                        lineStyle: {
                            color: '#dddc6b'
                        }
                    }
                },
                grid: {
                    left: '0',
                    top: '30',
                    right: '20',
                    bottom: '-10',
                    containLabel: true
                },
                legend: {
                    data: ['温度', '自行车租聘数', '降雨量', '能见度'],
                    right: 'center',
                    top: 0,
                    textStyle: {
                        color: "#fff"
                    },
                    itemWidth: 12,
                    itemHeight: 10,
                },
                xAxis: [{
                    type: 'category',
                    boundaryGap: false,
                    axisLabel: {
                        textStyle: {
                            color: "rgba(255,255,255,.6)",
                            fontSize: 14,
                        },
                    },
                    axisLine: {
                        lineStyle: {
                            color: 'rgba(255,255,255,.1)'
                        }
                    },
                    data: time
                }, {
                    axisPointer: {show: false},
                    axisLine: {show: false},
                    position: 'bottom',
                    offset: 20,
                }],
                yAxis: [{
                    type: 'value',
                    axisTick: {show: false},
                    axisLine: {
                        lineStyle: {
                            color: 'rgba(255,255,255,.1)'
                        }
                    },
                    axisLabel: {
                        textStyle: {
                            color: "rgba(255,255,255,.6)",
                            fontSize: 14,
                        },
                    },
                    splitLine: {
                        lineStyle: {
                            color: 'rgba(255,255,255,.1)'
                        }
                    }
                }],
                series: [
                    {
                        name: '温度',
                        type: 'line',
                        smooth: true,
                        symbol: 'circle',
                        symbolSize: 5,
                        showSymbol: false,
                        lineStyle: {
                            normal: {
                                width: 2
                            }
                        },
                        areaStyle: {
                            normal: {
                                color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                                    offset: 0,
                                    color: 'rgba(228, 228, 126, .8)'
                                }, {
                                    offset: 0.8,
                                    color: 'rgba(228, 228, 126, 0.1)'
                                }], false),
                                shadowColor: 'rgba(0, 0, 0, 0.1)',
                            }
                        },
                        itemStyle: {
                            normal: {
                                borderColor: 'rgba(221, 220, 107, .1)',
                                borderWidth: 12
                            }
                        },
                        data: temperature_data,
                        // 设置温度系列的颜色
                        lineStyle: {
                            normal: {
                                color: colorArray[0]
                            }
                        },
                        itemStyle: {
                            normal: {
                                color: colorArray[0]
                            }
                        }
                    }, {
                        name: '自行车租聘数',
                        type: 'line',
                        smooth: true,
                        symbol: 'circle',
                        symbolSize: 5,
                        showSymbol: false,
                        lineStyle: {
                            normal: {
                                width: 2
                            }
                        },
                        areaStyle: {
                            normal: {
                                color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                                    offset: 0,
                                    color: 'rgba(255, 128, 128,.8)'
                                }, {
                                    offset: 0.8,
                                    color: 'rgba(255, 128, 128, .1)'
                                }], false),
                                shadowColor: 'rgba(0, 0, 0, 0.1)',
                            }
                        },
                        itemStyle: {
                            normal: {
                                borderColor: 'rgba(221, 220, 107, .1)',
                                borderWidth: 12
                            }
                        },
                        data: RentedBikeCount,
                        // 设置自行车租聘数系列的颜色
                        lineStyle: {
                            normal: {
                                color: colorArray[1]
                            }
                        },
                        itemStyle: {
                            normal: {
                                color: colorArray[1]
                            }
                        }
                    },
                    {
                        name: '降雨量',
                        type: 'line',
                        smooth: true,
                        symbol: 'circle',
                        symbolSize: 5,
                        showSymbol: false,
                        lineStyle: {
                            normal: {
                                width: 2
                            }
                        },
                        areaStyle: {
                            normal: {
                                color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                                    offset: 0,
                                    color: 'rgba(255, 128, 128,.8)'
                                }, {
                                    offset: 0.8,
                                    color: 'rgba(255, 128, 128, .1)'
                                }], false),
                                shadowColor: 'rgba(0, 0, 0, 0.1)',
                            }
                        },
                        itemStyle: {
                            normal: {
                                borderColor: 'rgba(221, 220, 107, .1)',
                                borderWidth: 12
                            }
                        },
                        data: Rainfall,
                        // 设置降雨量系列的颜色
                        lineStyle: {
                            normal: {
                                color: colorArray[2]
                            }
                        },
                        itemStyle: {
                            normal: {
                                color: colorArray[2]
                            }
                        }
                    }, {
                        name: '能见度',
                        type: 'line',
                        smooth: true,
                        symbol: 'circle',
                        symbolSize: 5,
                        showSymbol: false,
                        lineStyle: {
                            normal: {
                                width: 2
                            }
                        },
                        areaStyle: {
                            normal: {
                                color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                                    offset: 0,
                                    color: 'rgba(255, 128, 128,.8)'
                                }, {
                                    offset: 0.8,
                                    color: 'rgba(255, 128, 128, .1)'
                                }], false),
                                shadowColor: 'rgba(0, 0, 0, 0.1)',
                            }
                        },
                        itemStyle: {
                            normal: {
                                borderColor: 'rgba(221, 220, 107, .1)',
                                borderWidth: 12
                            }
                        },
                        data: Visibility,
                        // 设置能见度系列的颜色
                        lineStyle: {
                            normal: {
                                color: colorArray[3]
                            }
                        },
                        itemStyle: {
                            normal: {
                                color: colorArray[3]
                            }
                        }
                    }
                ]
            };

            // 使用刚指定的配置项和数据显示图表。
            myChart.setOption(option);
            window.addEventListener("resize", function () {
                myChart.resize();
            });
        }


        function echarts_3() {
            // 基于准备好的dom，初始化echarts实例
            var myChart = echarts.init(document.getElementById('echarts3'));

            option = {
                tooltip: {
                    trigger: 'axis',
                    axisPointer: {
                        lineStyle: {
                            color: '#dddc6b'
                        }
                    }
                },
                grid: {
                    left: '0',
                    top: '30',
                    right: '20',
                    bottom: '-10',
                    containLabel: true
                },

                xAxis: [{
                    type: 'category',
                    boundaryGap: false,
                    axisLabel: {
                        textStyle: {
                            color: "rgba(255,255,255,.6)",
                            fontSize: 14,
                        },
                    },
                    axisLine: {
                        lineStyle: {
                            color: 'rgba(255,255,255,.1)'
                        }

                    },

                    data: [ {% for month in month_list %}
                        '{{ month }}月',
                    {% endfor %}]


                }, {

                    axisPointer: {show: false},
                    axisLine: {show: false},
                    position: 'bottom',
                    offset: 20,


                }],

                yAxis: [{
                    type: 'value',
                    axisTick: {show: false},
                    axisLine: {
                        lineStyle: {
                            color: 'rgba(255,255,255,.1)'
                        }
                    },
                    axisLabel: {
                        textStyle: {
                            color: "rgba(255,255,255,.6)",
                            fontSize: 14,
                        },
                    },

                    splitLine: {
                        lineStyle: {
                            color: 'rgba(255,255,255,.1)',

                        }
                    }
                }],
                series: [
                    {
                        name: '标题名称',
                        type: 'line',
                        smooth: true,
                        symbol: 'circle',
                        symbolSize: 10,
                        showSymbol: true,
                        lineStyle: {

                            normal: {
                                color: 'rgba(228, 228, 126, 1)',
                                width: 2
                            }
                        },
                        areaStyle: {
                            normal: {
                                color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                                    offset: 0,
                                    color: 'rgba(228, 228, 126, .8)'
                                }, {
                                    offset: 0.8,
                                    color: 'rgba(228, 228, 126, 0.1)'
                                }], false),
                                shadowColor: 'rgba(0, 0, 0, 0.1)',
                            }
                        },
                        itemStyle: {
                            normal: {
                                color: '#dddc6b',
                                borderColor: 'rgba(221, 220, 107, .1)',
                                borderWidth: 12
                            }
                        },
                        data: {{ monthly_ridership }}

                    }

                ]

            };

            // 使用刚指定的配置项和数据显示图表。
            myChart.setOption(option);
            window.addEventListener("resize", function () {
                myChart.resize();
            });
        }

        function pe01() {
            // 基于准备好的dom，初始化echarts实例
            var myChart = echarts.init(document.getElementById('pe01'));
            var txt = {{ holiday_percentage }};
            option = {
                title: {
                    text: txt + '%',
                    x: 'center',
                    y: 'center',
                    textStyle: {
                        fontWeight: 'normal',
                        color: '#fff',
                        fontSize: '18'
                    }
                },
                color: '#49bcf7',

                series: [{
                    name: 'Line 1',
                    type: 'pie',
                    clockWise: true,
                    radius: ['65%', '80%'],
                    itemStyle: {
                        normal: {
                            label: {
                                show: false
                            },
                            labelLine: {
                                show: false
                            }
                        }
                    },
                    hoverAnimation: false,
                    data: [{
                        value: txt,
                        name: '已使用',
                        itemStyle: {
                            normal: {
                                color: '#eaff00',
                                label: {
                                    show: false
                                },
                                labelLine: {
                                    show: false
                                }
                            }
                        }
                    }, {
                        name: '未使用',
                        value: 100 - txt
                    }]
                }]
            };

            // 使用刚指定的配置项和数据显示图表。
            myChart.setOption(option);
            window.addEventListener("resize", function () {
                myChart.resize();
            });
        }

        function pe02() {
            // 基于准备好的dom，初始化echarts实例
            var myChart = echarts.init(document.getElementById('pe02'));
            var txt = {{over_rain}};
            option = {
                title: {
                    text: txt + '%',
                    x: 'center',
                    y: 'center',
                    textStyle: {
                        fontWeight: 'normal',
                        color: '#fff',
                        fontSize: '18'
                    }
                },
                color: '#49bcf7',

                series: [{
                    name: 'Line 1',
                    type: 'pie',
                    clockWise: true,
                    radius: ['65%', '80%'],
                    itemStyle: {
                        normal: {
                            label: {
                                show: false
                            },
                            labelLine: {
                                show: false
                            }
                        }
                    },
                    hoverAnimation: false,
                    data: [{
                        value: txt,
                        name: '已使用',
                        itemStyle: {
                            normal: {
                                color: '#ea4d4d',
                                label: {
                                    show: false
                                },
                                labelLine: {
                                    show: false
                                }
                            }
                        }
                    }, {
                        name: '未使用',
                        value: 100 - txt
                    }]
                }]
            };

            // 使用刚指定的配置项和数据显示图表。
            myChart.setOption(option);
            window.addEventListener("resize", function () {
                myChart.resize();
            });
        }

        function pe03() {
            // 基于准备好的dom，初始化echarts实例
            var myChart = echarts.init(document.getElementById('pe03'));
            var txt = {{ over_wind }};
            option = {
                title: {
                    text: txt + '%',
                    x: 'center',
                    y: 'center',
                    textStyle: {
                        fontWeight: 'normal',
                        color: '#fff',
                        fontSize: '18'
                    }
                },
                color: '#49bcf7',

                series: [{
                    name: 'Line 1',
                    type: 'pie',
                    clockWise: true,
                    radius: ['65%', '80%'],
                    itemStyle: {
                        normal: {
                            label: {
                                show: false
                            },
                            labelLine: {
                                show: false
                            }
                        }
                    },
                    hoverAnimation: false,
                    data: [{
                        value: txt,
                        name: '已使用',
                        itemStyle: {
                            normal: {
                                color: '#395ee6',
                                label: {
                                    show: false
                                },
                                labelLine: {
                                    show: false
                                }
                            }
                        }
                    }, {
                        name: '未使用',
                        value: 100 - txt
                    }
                    ]
                }]
            };

            // 使用刚指定的配置项和数据显示图表。
            myChart.setOption(option);
            window.addEventListener("resize", function () {
                myChart.resize();
            });
        }

    })


</script>
{#<script language="JavaScript" src="{% static 'web/visualize_static/js/js.js' %}"></script>#}
<script>
    // 初始化echarts实例
    var myChart = echarts.init(document.getElementById('lineChart'));

    // 定义横坐标和纵坐标数据
    var x = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10];
    var y = [0.011822901666164398, 0.009303064085543156, 0.008337803184986115, 0.00776904821395874, 0.007420895621180534, 0.007141396403312683, 0.006998645141720772, 0.006786405108869076, 0.006667914800345898, 0.006559719797223806];

    // 配置折线图的参数
    var option = {
        title: {
            text: 'Model Loss'
        },
        xAxis: {
            type: 'category',
            name: 'Epoch',
            data: x,
            axisLabel: {
                color: 'white' // 设置横坐标文字颜色为白色
            }
        },
        yAxis: {
            type: 'value',
            name: 'Loss',
            axisLabel: {
                color: 'white' // 设置纵坐标文字颜色为白色
            }
        },
        series: [{
            data: y,
            type: 'line',
            label: {
                show: true,
                color: 'white' // 设置数据标签文字颜色为白色
            }
        }],
        textStyle: {
            color: 'white' // 设置图表标题文字颜色为白色
        },
        axisLine: {
            lineStyle: {
                color: 'white' // 设置坐标轴线颜色为白色
            }
        }
    };

    // 使用刚指定的配置项和数据显示图表
    myChart.setOption(option);
</script>
<script>
    function enter_backend() {
        window.location.href = "{% url 'user_backend' %}";
    }
</script>
</body>
</html>